<template>
  <nav class="content-wrapper">
    <li v-for="i in data" :key="i.id" class="list">
      <div class="top">
        <h4 class="title">{{ i.label }}</h4>
        <small class="update">{{ i.updated }}</small>
      </div>
      <div class="body">
        <div class="label">
          <div v-for="j in i.tags" :key="j.id">
            <el-tag>{{ j }}</el-tag>
          </div>
        </div>
        <div class="record">
          <span>点击量：<span class="number">{{ i.watch }}</span></span>
          <span>点赞数：<span class="number">{{ i.readNumber }}</span></span>
          <span>评论数：<span class="number">{{ i.commentNumber }}</span></span>
        </div>
      </div>
    </li>
  </nav>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  props: {
    data: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {}
  }
})
</script>

<style scoped lang="scss">
.content-wrapper {
  flex: 1;
  margin: 0 10px;
  padding: 0px 20px;
  background-color: #fff;
  .list {
    border-bottom: 1px solid #eee;
    padding: 5px 0;
    .top {
      height: 40px;
      line-height: 50px;
      display: flex;
      justify-content: space-between;
    }
    .body {
      height: 60px;
      line-height: 60px;
      display: flex;
      justify-content: space-between;
      .label {
        display: flex;
        .el-tag {
          margin-right: 20px;
        }
      }
      .record {
        color: #999;
        > span {
          margin-left: 10px;
        }
        .number {
          color: var(--tmColor)
        }
      }
    }
  }
}
</style>
